<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/11/14
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <%--    <link rel="stylesheet" href="font/iconfont.css">--%>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            position: relative;
            width: 300px;
            height: 40px;
            margin: 0 auto;
            margin-top: 10px;
            background-color: #e8e8e8;
            box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
        }
        .bgColor{
            position: absolute;
            left:0;
            top:0;
            width:40px;
            height: 40px;
            background-color: lightblue;
        }
        .txt{
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #000;
            text-align: center;
        }
        .slider{
            position: absolute;
            left:0;
            top:0;
            width: 50px;
            height: 38px;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            cursor: move;
        }
        .slider>i{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .slider.active>i{
            color:green;
        }

        #usernameTips{
            padding: 0 15px 0 0;
            width: 100%;
            text-align: right;
        }

        #pwTips{
            padding: 0 15px 0 0;
            width: 100%;
            text-align: right;
        }
    </style>

    <style type="text/css">
        table.imagetable {
            font-family: verdana,arial,sans-serif;
            font-size:15px;
            color:#333333;
            border-width: 2px;
            border-color: #999999;
            border-collapse: collapse;
        }
        table.imagetable th {
            background:#b5cfd2;
            border-width: 2px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
        }

        table.imagetable td {
            background:#dcddc0;
            border-width: 2px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
        }

        table.imagetable thead th:first-child {
            border-radius: 5px 0 0 0;
            border: 1px solid blue;
        }
        table.imagetable thead th:last-child {
            border-radius: 0 5px 0 0;
            border-right: 1px solid blue;
        }
        table.imagetable tbody tr:last-child td:first-child {
            border-radius: 0 0 0 5px;
        }

        table.imagetable tbody tr:last-child td:last-child {
            border-radius: 0 0 5px 0;
        }
    </style>

    <style>
        input{
            outline-style: none ;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 13px 14px;
            width: 64px;
            height: 30px;
            font-size: 14px;
            font-weight: 700;
            font-family: "Microsoft soft";
        }

        #Search #SearchContent #btn_search {
            padding: 0;
        }

        .Button{
            outline-style: none ;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 13px 14px;
            width: 100px;
            height: 30px;
            font-size: 14px;
            font-weight: 700;
            font-family: "Microsoft soft";
        }
        .titleshopcart {
            margin-bottom: 10px;
        }
        .vcodediv .vcode {
            display: inline-block;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 2px;
            padding: 10px 0 10px 5px;
        }
    </style>

    <style type="text/css">
        #panel1,#flip1,#panel2,#flip2,#panel3,#flip3,#panel4,#flip4,#panel5,#flip5
        {
            padding:9px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }

        #flip1, #flip2, #flip3, #flip4, #flip5 {
            line-height: 40px;
        }

        #panel1,#panel2,#panel3,#panel4,#panel5
        {
            padding:10px 50px;
            display:none;
        }

        #Sidebar {
            width: 400px;
            margin-left: 50px;
            margin-top: 10px;
        }

        #WelcomeContent {
            margin-left: 58px;
            font-size: 26px;
        }

        .arrowMored {
            display: inline-block;
            height: 20px;
            width: 30px;
            background: url("images/arrowMored1.png") 0px 0px no-repeat;
            background-size: 30px 20px;
            float: right;
        }

        .arrowMoreu {
            display: inline-block;
            height: 20px;
            width: 30px;
            background: url("images/arrowMoreu1.png") no-repeat;
            background-size: 30px 20px;
            float: right;
        }
    </style>


    <%--    轮播图--%>
    <style>
        /* 全局样式设置 */
        h1{
            text-align: center;
            /*line-height: 100px;*/
        }
        a{
            text-decoration: none;
        }
        /* 设置轮播图样式 */
        /* 图片显示样式 */
        .banner_slider{
            position: relative;
            background-color: green;
            margin:0 auto;
            width:600px;
            height: 380px;
            overflow:hidden;
            border-radius: 15px;
            left: -90px;
        }
        .banner_slider_pics{
            width:4200px;
            height: 100%;
            margin:0 auto;
            position: relative;
            left:-600px;
            border-radius: 15px;
        }
        .banner_slider_pics>a{
            width: 600px;
            height: 380px;
            display: block;
            float: left;
            text-align:center;
        }
        .banner_slider_pics>a> img{
            width: 100%;
            height: 380px;
        }
        /* 上一张，下一张按钮样式 */
        .banner_slider_arrow{
            width: 600px;
            height: 40px;
            position: absolute;
            left: 0;
            bottom: 50%;
            margin-bottom: -20px;
        }
        .arrow_item{
            font-size: 25px;
            font-weight: bold;
            color: #fff;
            background-color: rgba(0,0,0,.6);
            opacity: .6;
        }
        .arrow_item:hover{
            opacity: .8;
        }
        .prev{
            position: absolute;
            left: 10px;
            padding: 12px 7px 8px 7px;
            border-radius: 6px;
        }
        .next{
            position: absolute;
            right: 10px;
            padding: 12px 7px 8px 7px;
            border-radius: 6px;
        }
        /* 圆点按钮 */
        .banner_slider_dots{
            width: 100%;
            height: 30px;
            line-height: 30px;
            position: absolute;
            bottom: 10px;
            text-align: center;
        }
        .dots_item{
            display: inline-block;
            width:10px;
            height: 10px;
            background-color: #999;
            border-radius:50%;
            border:3px solid #fff;
            margin-right: 10px;
        }
        .dots_active{
            background-color: #fff;
            border-color:orange;
        }
    </style>

    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
          media="screen" />
    <link rel="stylesheet" type="text/css" href="assets/waifu.min.css?v=1.4.2"/>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--图标-->
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

    <!--布局框架-->
    <link rel="stylesheet" type="text/css" href="css/util.css">

    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <script type="text/javascript" src="AjaxScript/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="AjaxScript/jquery-ui.js"></script>

    <script>
        ! function() {
            //封装方法，压缩之后减少文件大小
            function get_attribute(node, attr, default_value) {
                return node.getAttribute(attr) || default_value;
            }
            //封装方法，压缩之后减少文件大小
            function get_by_tagname(name) {
                return document.getElementsByTagName(name);
            }
            //获取配置参数
            function get_config_option() {
                var scripts = get_by_tagname("script"),
                    script_len = scripts.length,
                    script = scripts[script_len - 1]; //当前加载的script
                return {
                    l: script_len, //长度，用于生成id用
                    z: get_attribute(script, "zIndex", -1), //z-index
                    o: get_attribute(script, "opacity", 0.5), //opacity
                    c: get_attribute(script, "color", "0,0,0"), //color
                    n: get_attribute(script, "count", 99) //count
                };
            }
            //设置canvas的高宽
            function set_canvas_size() {
                canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                    canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            }

            //绘制过程
            function draw_canvas() {
                context.clearRect(0, 0, canvas_width, canvas_height);
                //随机的线条和当前位置联合数组
                var e, i, d, x_dist, y_dist, dist; //临时节点
                //遍历处理每一个点
                random_lines.forEach(function(r, idx) {
                    r.x += r.xa,
                        r.y += r.ya, //移动
                        r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
                        r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
                        context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
                    //从下一个点开始
                    for (i = idx + 1; i < all_array.length; i++) {
                        e = all_array[i];
                        //不是当前点
                        if (null !== e.x && null !== e.y) {
                            x_dist = r.x - e.x, //x轴距离 l
                                y_dist = r.y - e.y, //y轴距离 n
                                dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
                            dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
                                d = (e.max - dist) / e.max,
                                context.beginPath(),
                                context.lineWidth = d / 2,
                                context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
                                context.moveTo(r.x, r.y),
                                context.lineTo(e.x, e.y),
                                context.stroke());
                        }
                    }
                }), frame_func(draw_canvas);
            }
            //创建画布，并添加到body中
            var the_canvas = document.createElement("canvas"), //画布
                config = get_config_option(), //配置
                canvas_id = "c_n" + config.l, //canvas id
                context = the_canvas.getContext("2d"), canvas_width, canvas_height,
                frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
                    window.setTimeout(func, 1000 / 45);
                }, random = Math.random,
                current_point = {
                    x: null, //当前鼠标x
                    y: null, //当前鼠标y
                    max: 20000
                },
                all_array;
            the_canvas.id = canvas_id;
            the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
            get_by_tagname("body")[0].appendChild(the_canvas);
            //初始化画布大小

            set_canvas_size(), window.onresize = set_canvas_size;
            //当时鼠标位置存储，离开的时候，释放当前位置信息
            window.onmousemove = function(e) {
                e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;
            }, window.onmouseout = function() {
                current_point.x = null, current_point.y = null;
            };
            //随机生成config.n条线位置信息
            for (var random_lines = [], i = 0; config.n > i; i++) {
                var x = random() * canvas_width, //随机位置
                    y = random() * canvas_height,
                    xa = 2 * random() - 1, //随机运动方向
                    ya = 2 * random() - 1;
                random_lines.push({
                    x: x,
                    y: y,
                    xa: xa,
                    ya: ya,
                    max: 12000 //沾附距离
                });
            }
            all_array = random_lines.concat([current_point]);
            //0.1秒后绘制
            setTimeout(function() {
                draw_canvas();
            }, 100);
        }();
    </script>

    <script type="text/javascript">
        (function(window,document,undefined){
            var hearts = [];
            window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback){
                        setTimeout(callback,1000/60);
                    }
            })();
            init();
            function init(){
                css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                attachEvent();
                gameloop();
            }
            function gameloop(){
                for(var i=0;i<hearts.length;i++){
                    if(hearts[i].alpha <=0){
                        document.body.removeChild(hearts[i].el);
                        hearts.splice(i,1);
                        continue;
                    }
                    hearts[i].y--;
                    hearts[i].scale += 0.004;
                    hearts[i].alpha -= 0.013;
                    hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
                }
                requestAnimationFrame(gameloop);
            }
            function attachEvent(){
                var old = typeof window.onclick==="function" && window.onclick;
                window.onclick = function(event){
                    old && old();
                    createHeart(event);
                }
            }
            function createHeart(event){
                var d = document.createElement("div");
                d.className = "heart";
                hearts.push({
                    el : d,
                    x : event.clientX - 5,
                    y : event.clientY - 5,
                    scale : 1,
                    alpha : 1,
                    color : randomColor()
                });
                document.body.appendChild(d);
            }
            function css(css){
                var style = document.createElement("style");
                style.type="text/css";
                try{
                    style.appendChild(document.createTextNode(css));
                }catch(ex){
                    style.styleSheet.cssText = css;
                }
                document.getElementsByTagName('head')[0].appendChild(style);
            }
            function randomColor(){
                return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
            }
        })(window,document);
    </script>

    <script>
        var container = document.getElementById("main");
        container.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
        container.style.opacity = "0.8";
    </script>

    <%--    任务--%>
    <script>

        $(function() {
            /* 表单验证 */
            $('#username').on('blur', function () {
                $.ajax({
                    type    : "GET",
                    url     : "usernameExist?username="+this.value,
                    success : function (data) {
                        if (data.msg === 'Exist'){
                            $('#usernameTips').attr("class", "notokTips").text('Invalid');
                        } else if (data.msg === 'Not Exist'){
                            $('#usernameTips').attr("class", "okTips").text('Available');
                        }
                    }
                });
            });

            $('#usernamelogin').on('blur', function () {
                $.ajax({
                    type    : "GET",
                    url     : "usernameExist?username="+this.value,
                    success : function (data) {
                        if (data.msg === 'Not Exist'){
                            $('#usernameTips').attr("class", "notokTips").text('Invalid');
                        } else if (data.msg === 'Exist'){
                            $('#usernameTips').attr("class", "okTips").text('Available');
                        }
                    }
                });
            });

            $('#repw').on('blur', function () {
                $.ajax({
                    type    : "GET",
                    url     : "passwordValid?newpw="+$('#newpw').val()+"&repw="+this.value,
                    success : function (data) {
                        if(data.code === 0){
                            $('#pwTips').attr("class", "notokTips").text('Invalid');
                        } else if (data.code === 1) {
                            $('#pwTips').attr("class", "okTips").text('Available');
                        }
                    }
                });
            });


            /* 自动补全，input标签id为input_search */
            $('#input_search').autocomplete({
                /* source是自动补全内容的选取范围，通过函数实现 */
                source: function (request, response) {
                    var rs = [];
                    $.ajax({
                        type    : "GET",
                        url     : "searchAutoComplete?keyword="+$('#input_search').val(),
                        success : function (data) {
                            if(data.productList!=null){
                                /* 将返回的数据作为结果 */
                                for(var i=0; i<5&&i<data.productList.length; i++)
                                    rs.push(data.productList[i]);

                                response($.map(rs, function (item) {
                                    return {
                                        /* 选取name为补全的内容 */
                                        label: item.name.toString()
                                    };
                                }));
                            }
                        }
                    });
                }
            });

        });
    </script>

    <%--    轮播图--%>
    <script>
        window.onload=function(){
            var banner_slider=$('#banner_slider'),
                pics=$('#banner_slider_pics'),
                items=$('#banner_slider_pics a'),
                pic_width=items.eq(0).width(),
                dots=$('#banner_slider_dots a'),
                btn_prev=$('#arrow_prev'),
                btn_next=$('#arrow_next'),
                current=0,
                timmer=null,
                size = dots.length;
            // 定义一个鼠标滑过判断事件
            banner_slider.hover(function(){
                clearInterval(timmer);
            },function(){
                timmer=setInterval(slider,3000);
            });
            function slider(){
                current++;
                doSlider();
            }
            function doSlider(){
                // 圆点按钮轮播
                dots.removeClass('dots_active').eq(current%size).addClass('dots_active');
                // 图片轮播
                pics.stop().animate({
                    left:-(current+1)*pic_width
                },1000,function(){
                    if(current==size){
                        current=0;
                        pics.css('left',-(current+1)*pic_width+'px');
                    }else if(current==-1){
                        current=size-1;
                        pics.css('left',-(size)*pic_width+'px');
                    }
                });
            }

            timmer=setInterval(slider,3000);
            // 点击上一张按钮切换图片
            btn_prev.click(function(){
                current--;
                doSlider();
            });
            // 点击下一张按钮切换图片
            btn_next.click(function(){
                current++;
                doSlider();
            });
            // 点击圆点切换图片
            dots.click(function(){
                current=$(this).index();
                doSlider();
            });



            $('.banner_slider_pics').children().each(function (index, val) {
                //获取.banner_slider_pics下的子元素$(this)，即遍历的某个a标签
                var alog = $(this);
                $.ajax({
                    type:   "GET",
                    url:    "searchTooltip?categoryId="+alog.attr('class'),
                    success: function (data) {
                        var dscn = 'Category: '+alog.attr('class')
                            +'\nProductID and Name: \n';
                        if (data.productList!=null){
                            for (var i=0;i<data.productList.length;i++){
                                dscn += data.productList[i].productId.toString();
                                dscn += ' ';
                                dscn += data.productList[i].name.toString();
                                dscn += '\n';
                            }
                            alog.attr('title', dscn);
                        }
                    }
                });
            });
        }
    </script>

    <%--    主界面折叠 --%>
        <script>
            $(document).ready(function(){
                $("#flip1").click(function(){
                    $("#panel1").slideToggle("slow");
                    if($("#flip1 i").attr("class")==="arrowMored")
                        $("#flip1 i").attr("class", "arrowMoreu");
                    else if($("#flip1 i").attr("class")==="arrowMoreu")
                        $("#flip1 i").attr("class", "arrowMored");
                });
                $("#flip2").click(function(){
                    $("#panel2").slideToggle("slow");
                    if($("#flip2 i").attr("class")==="arrowMored")
                        $("#flip2 i").attr("class", "arrowMoreu");
                    else if($("#flip2 i").attr("class")==="arrowMoreu")
                        $("#flip2 i").attr("class", "arrowMored");
                });
                $("#flip3").click(function(){
                    $("#panel3").slideToggle("slow");
                    if($("#flip3 i").attr("class")==="arrowMored")
                        $("#flip3 i").attr("class", "arrowMoreu");
                    else if($("#flip3 i").attr("class")==="arrowMoreu")
                        $("#flip3 i").attr("class", "arrowMored");
                });
                $("#flip4").click(function(){
                    $("#panel4").slideToggle("slow");
                    if($("#flip4 i").attr("class")==="arrowMored")
                        $("#flip4 i").attr("class", "arrowMoreu");
                    else if($("#flip4 i").attr("class")==="arrowMoreu")
                        $("#flip4 i").attr("class", "arrowMored");
                });
                $("#flip5").click(function(){
                    $("#panel5").slideToggle("slow");
                    if($("#flip5 i").attr("class")==="arrowMored")
                        $("#flip5 i").attr("class", "arrowMoreu");
                    else if($("#flip5 i").attr("class")==="arrowMoreu")
                        $("#flip5 i").attr("class", "arrowMored");
                });

            });
        </script>
</head>

<body>

<script color="255,255,255" opacity="1" count="99" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js" type="text/javascript" charset="utf-8"></script>

<%--<div id="Header">--%>

<%--    <div id="Logo">--%>
<%--        <div id="LogoContent">--%>
<%--            <a href="main"><img src="images/logo-topbar.gif" /></a>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <div id="Menu">--%>
<%--        <div id="MenuContent">--%>
<%--            <a href="viewCart">--%>
<%--                <img align="middle" name="img_cart" src="images/cart.gif" />--%>
<%--            </a>--%>
<%--                <img align="middle" src="images/separator.gif" />--%>
<%--            <a href="toSignInServlet">Sign In</a>--%>
<%--            <a href="#">Sign Out</a>--%>
<%--                <img align="middle" src="images/separator.gif" />--%>
<%--            <a href="#">My Account</a>--%>
<%--                <img align="middle" src="images/separator.gif" />--%>
<%--            <a href="#">?</a>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <div id="Search">--%>
<%--        <div id="SearchContent">--%>
<%--            <form action="search" method="post">--%>
<%--                <input type="text" name="keyword" size="14" /> <input type="submit"--%>
<%--                                                                      name="searchProducts" value="Search" />--%>
<%--            </form>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <div id="QuickLinks">--%>
<%--        <a href="viewCategory?categoryId=FISH"><img--%>
<%--                src="images/sm_fish.gif" /></a> <img src="images/separator.gif" />--%>
<%--        <a href="viewCategory?categoryId=DOGS"><img--%>
<%--                src="images/sm_dogs.gif" /></a> <img src="images/separator.gif" />--%>
<%--        <a href="viewCategory?categoryId=REPTILES"><img--%>
<%--                src="images/sm_reptiles.gif" /></a> <img src="images/separator.gif" />--%>
<%--        <a href="viewCategory?categoryId=CATS"><img--%>
<%--                src="images/sm_cats.gif" /></a> <img src="images/separator.gif" />--%>
<%--        <a href="viewCategory?categoryId=BIRDS"><img--%>
<%--                src="images/sm_birds.gif" /></a>--%>
<%--    </div>--%>

<%--</div>--%>
<div id="Header">

    <div id="Logo">
        <div id="LogoContent">
            <%--            <stripes:link--%>
            <%--                beanclass="org.mybatis.jpetstore.web.actions.CatalogActionBean">--%>
            <%--            <img src="images/logo-topbar.gif" />--%>
            <%--            </stripes:link>--%>
            <a href="#"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <%--            <stripes:link--%>
            <%--                beanclass="org.mybatis.jpetstore.web.actions.CartActionBean"--%>
            <%--                event="viewCart">--%>
            <%--            <img align="middle" name="img_cart" src="images/cart.gif" />--%>
            <%--            </stripes:link> --%>
            <a href="viewCart"><img align="middle" name="img_cart" src="images/cart.gif" /></a>
            <img align="middle" src="images/separator.gif" />
            <c:if test="${sessionScope.account == null}">
                <%--            <stripes:link--%>
                <%--                    beanclass="org.mybatis.jpetstore.web.actions.AccountActionBean"--%>
                <%--                    event="signonForm">--%>
                <%--                Sign In--%>
                <%--            </stripes:link>--%>
                <a href="signonForm">Sign In</a>
            </c:if>
            <%--                <c:if test="${sessionScope.account != null}">--%>
            <%--                    <c:if test="${!sessionScope.account.authenticated}">--%>
            <%--&lt;%&ndash;                        <stripes:link&ndash;%&gt;--%>
            <%--&lt;%&ndash;                            beanclass="org.mybatis.jpetstore.web.actions.AccountActionBean"&ndash;%&gt;--%>
            <%--&lt;%&ndash;                            event="signonForm">&ndash;%&gt;--%>
            <%--&lt;%&ndash;                                Sign In&ndash;%&gt;--%>
            <%--&lt;%&ndash;                        </stripes:link>&ndash;%&gt;--%>
            <%--                        <a href="toSignInServlet">Sign In</a>--%>
            <%--                    </c:if>--%>
            <%--                </c:if>--%>
            <c:if test="${sessionScope.account != null}">
                <%--                <c:if test="${sessionScope.account.authenticated}">--%>
                <%--                    <stripes:link--%>
                <%--                            beanclass="org.mybatis.jpetstore.web.actions.AccountActionBean"--%>
                <%--                            event="signoff">--%>
                <%--                        Sign Out--%>
                <%--                    </stripes:link>--%>
                <a href="signoff">Sign Out</a>
                <img align="middle" src="images/separator.gif" />
                <%--                    <stripes:link--%>
                <%--                            beanclass="org.mybatis.jpetstore.web.actions.AccountActionBean"--%>
                <%--                            event="editAccountForm">--%>
                <%--                        My Account--%>
                <%--                     </stripes:link>--%>
                <a href="editAccount?username=${sessionScope.account.username}">My Account</a>
                <%--                </c:if>--%>
            </c:if>
            <img align="middle" src="images/separator.gif" />
            <a href="help.html">?</a>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <form action="search">
                <input type="text" name="keyword" size="14" id="input_search"/>
                <input type="submit" name="search" value="Search" id="btn_search"/>
            </form>
        </div>
    </div>

    <div id="QuickLinks">
        <a href="viewCategory?categoryId=FISH">
            <img src="images/sm_fish.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=DOGS">
            <img src="images/sm_dogs.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=REPTILES">
            <img src="images/sm_reptiles.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=CATS">
            <img src="images/sm_cats.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=BIRDS">
            <img src="images/sm_birds.gif" />
        </a>
    </div>

</div>

<div id="Content">
    <td colspan="2" align="right">
        <%
            String msg = (String)request.getAttribute("loginMsg");
            if(msg!=null)
            {
                out.println("<font color='red'>"+msg+"</font>");
            }
        %>
    </td>